import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/components/FontIcon.dart';
import 'package:todo_app/components/Overlay/main.dart';
import 'package:todo_app/components/TextExt.dart';
import 'package:todo_app/components/UserNameAvatar.dart';
import 'package:todo_app/constants/DColor.dart';
import 'package:todo_app/controllers/GroupController.dart';
import 'package:todo_app/controllers/definitions/GroupModel.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/layout/ListItem.dart';
import 'package:todo_app/utils/AppNavigator.dart';

class GroupPage extends HookWidget {
  const GroupPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    useAutomaticKeepAlive();
    var groups = useState<List<GroupModel>>([]);
    useEffect(() {
      GroupController.listUsingGet().then((res) {
        if(res.status == 'success') {
          groups.value = res.data ?? [];
        } else {
          showOverlayToast(res.msg ?? "获取用户分组失败");
        }
      });
      return () {};
    }, []);
    return CustomScrollView(
        slivers: [
          const SliverAppBar(
            title: Text("分组"), 
            backgroundColor: DColor.primary,
          ),
          SliverToBoxAdapter(
            child: Gaps.vGap10,
          ),
          SliverList.list(
            children: groups.value.map((group) {
              return ListItem(
                onTap: () {
                  AppNavigator.pushNamed('groupDetail', params: {
                    "id": group.id.toString()
                  });
                },
                icon: UserNameAvatar(username: group.group_name ?? "组", size: 50.dp,),
                title: Container(
                  margin: EdgeInsets.only(bottom: 4.dp),
                  child: TextExt.title(
                    group.group_name ?? "", fontSize: 18.dp,
                    lineHeight: 24 / 18,
                  ),
                ),
                border: groups.value.last != group,
                bgColor: Colors.white,
                subtitle: Text.rich(
                  TextSpan(
                    children: [
                      WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: FontIcon(icon: FontIcons.users, size: 10.dp, color: DColor.descText),
                      ),
                      WidgetSpan(child: Gaps.hGap4),
                      TextSpan(text: group.total_user_count?.toStringAsFixed(0) ?? '0'),
                      WidgetSpan(child: Gaps.hGap12),
                      WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: FontIcon(icon: FontIcons.trophy, size: 10.dp, color: DColor.descText)
                      ),
                      WidgetSpan(child: Gaps.hGap4),
                      TextSpan(text: group.running_todo_count?.toStringAsFixed(0) ?? '0')
                    ]
                  ),
                  style: TextStyle(fontSize: 14.dp, color: DColor.descText)
                ),
                nextIcon: true,
              );
            }).toList()
          )
        ],
    );
  }
}